# Getting Started

## Overview

Vocs is a [React](https://react.dev)-based static documentation generator, powered by [Vite](https://vitejs.dev).

Write your content in [Markdown](https://en.wikipedia.org/wiki/Markdown) or [MDX](https://mdxjs.com/), and Vocs will generate a static site with a default theme.

## Quick Start

### Bootstrap via CLI

Scaffold a new project with the command line:

:::code-group

```bash [npm]
npm init vocs
```

```bash [pnpm]
pnpm create vocs
```

```bash [yarn]
yarn create vocs
```

```bash [bun]
bun create vocs
```

:::

### Bootstrap via Vercel

Scaffold a new project and deploy it instantly with Vercel:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwevm%2Fvocs%2Ftree%2Fmain%2Fcreate-vocs%2Ftemplates%2Fdefault)

## Manual Installation

You can install Vocs in an existing project, or start from scratch, by installing Vocs as a dependency.

::::steps

### Install

First, we will install `vocs` as a dependency in our project.

:::code-group

```bash [npm]
npm i vocs@next
```

```bash [pnpm]
pnpm i vocs@next
```

```bash [yarn]
yarn add vocs@next
```

```bash [bun]
bun i vocs@next
```

:::

### Add Scripts to `package.json`

After that, let's add some scripts to our `package.json` for Vocs.

```json [package.json]
{
  "name": "example",
  "version": "0.0.0",
  "scripts": { // [!code focus]
    "docs:dev": "vocs dev", // [!code focus] 
    "docs:build": "vocs build", // [!code focus]
    "docs:preview": "vocs preview" // [!code focus]
  } // [!code focus]
}
```

### Build your First Page

Create a directory called `docs`, and add a file inside of it called `index.mdx` under a `pages` directory:

```md
my-project/      
├── docs/ <!-- [!code focus] -->
│   ├── pages/ <!-- [!code focus] -->
│   │   └── index.mdx <!-- [!code focus] --> 
├── node_modules/
└── package.json  
```

```markdown [docs/pages/index.mdx]
# Hello, World! [This is my first page]

Welcome to my docs. 
```

### Run

Next, run the development server:

```bash [Terminal]
npm run docs:dev
```

Then open up your browser to `http://localhost:5173`, and you can see your first page!

### Next Steps

Now that you have a basic documentation site up and running, you can learn more about how Vocs projects are structured in [Project Structure](/docs/structure).

::::
